<template>
    <div>
      <textarea v-model="content"></textarea>
      <br>
      <br>
      <Button color="blue" @click="comment">开始评论</Button>

      <ul>
        <li v-for="item in commentlist">
          {{ item.uid|myfilter }}:{{item.content}}
        </li>
      </ul>
      <Pagination v-model="pagination" layout="pager" small @change="change" align="center"></Pagination>
		</div>
</template>

<script>
    export default {
        name: "comment",
      data () {
    return {
      //商品ID
      id:'',
      // 评论内容
      content:'',
      //评论列表容器
      commentlist:[],
      //用户信息字典
      myuser:{},
      // 分页
      pagination:{
        page:1,
        size:2,
        total:5,
      },
    }
  },

  // 自定义过滤器
  filters:{
    //自定义方法
    myfilter:function (value) {
      // 通过key（用户ID）取用户名   学名：管道式调用 |
      return window.that.myuser[value];
    }
  },


  mounted:function(){

    // 接收商品ID
    var id = this.$route.query.id;
    this.id = id;
    // console.log(id)

    window.that = this;

    // 调用评论接口  分页
    this.change();

    // 调用用户列表接口
    this.get_user();


},
  methods:{
    // 调用所有用户列表
    get_user:function(){
      //发送请求
      this.axios.get(
          'http://127.0.0.1:8000/userlist/').then(res=>{
            console.log(res);
            //动态赋值
            for(let i=0, l=res.data.length; i<l; i++){
              this.myuser[res.data[i].id] = res.data[i].username;
            }
            console.log(this.myuser)
        });
    },


    // 调用评论列表
    change:function(){
      //发送请求
      this.axios.get(
          'http://127.0.0.1:8000/commentlist/',{params:{id: this.id, page:this.pagination.page,size:this.pagination.size}}).then(res=>{
            console.log(res);
            //赋值
            this.commentlist = res.data.data

        });
    },


    //评论方法
    comment:function(){

      if(this.content === ''){
        this.$Message('评论内容不能为空');
        return false;
      }

      //发送请求
      this.axios.post(
          'http://127.0.0.1:8000/insertcomment/',this.qs.stringify({content: this.content, uid:localStorage.getItem('uid'), gid:this.id})).then(res=>{
            console.log(res);

            this.$Message(res.data.msg);

            if(res.data.code===200){

              // 将评论内容和作者实时填充到评论容器中
              this.commentlist.unshift(({"uid":localStorage.getItem('uid'), 'content': this.content}));

              this.content='';
            }

        });
    },


  }
    }
</script>

<style scoped>

</style>
